/** * @Author: xlchao * @Date: 2017/12/8 */
<template>
  <div>
    <el-dialog :close-on-click-modal="false" title="创建部门" :visible.sync="modal" width="600px" :before-close="handleClose">
      <div>
        <el-form size="small" class="from-box" ref="deptForm" :rules="rules" :model="deptForm" label-width="80px">
          <el-form-item label="简称" prop="name">
            <el-input name="name" v-model.trim="deptForm.name"></el-input>
          </el-form-item>
          <el-form-item label="所属分部" prop="fatherNode">
            <el-cascader :options="treeData" :props="propFather" v-model="deptForm.fatherNode" change-on-select :show-all-levels="false"
              style="width: 100%">
            </el-cascader>
          </el-form-item>
          <el-form-item label="部门类型" prop="type">
            <el-select v-model.number="deptForm.type" type="number" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排序" prop="order">
            <el-input-number v-model="deptForm.order" controls-position="right" :min="1" :max="9" style="width: 100%"></el-input-number>
          </el-form-item>
          <el-form-item label="部门描述" prop="desc">
            <el-input v-model.trim="deptForm.desc" type="textarea" :rows="2"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('submit')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    formCheck,
    trim
  } from "../../../lib/utils";
  import {
    departmentManagement
  } from "../../../service/service_zbw";
  export default {
    props: {
      addVal: {
        type: Object
      },
      treeData: {
        type: Array
      },
      options: {
        type: Array
      }
    },
    data() {
      //设备名称校验
      const checkName = (rule, value, callback) => {
        let str = trim(value);
        if (!str) {
          return callback(new Error('简称不能为空'));
        } else {
          callback();
        }
      };
      //所属分布校验
      const checkFatherNode = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请选择所属分部'));
        } else {
          if (value.length <= 0) {
            callback(new Error('请选择所属分部'));
          }
          callback();
        }
      };
      return {
        modal: this.addVal.show,
        deptForm: {
          name: '',
          fatherNode: [],
          order: 1,
          type: 2,
          desc: ''
        },
        rules: {
          name: [{
            required: true,
            message: '请输入简称',
            trigger: 'blur'
          },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }],
          type: [{
            required: true,
          }],
          order: [{
            required: true,
          }],
          fatherNode: [{
            required: true,
            validator: checkFatherNode,
            trigger: 'change'
          }],
          desc: [{
              message: '请输入部门描述',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ]
        },
        //默认联动选择
        propFather: {
          value: 'deptId',
          label: 'deptName'
        },
      };
    },
    methods: {
      /**
       * 提交信息
       */
      async submit(val) {
        let flag = formCheck(this, 'deptForm');
        if (flag) {
          let param = {
            deptDesc: this.deptForm.desc,
            deptName: this.deptForm.name,
            deptOrder: this.deptForm.order,
            deptType: this.deptForm.type,
            parentId: this.deptForm.fatherNode[this.deptForm.fatherNode.length - 1],
            //parentIds: this.deptForm.fatherNode
          };
          let res = await departmentManagement.createNewOne(param);
          if (res.success) {
            this.$emit('finish', res.obj);
            this.$message({
              message: res.msg,
              type: 'success'
            });
            this.handleClose();
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        }
      },
      /**
       * 关闭模态框
       */
      handleClose() {
        this.modal = false;
        this.$emit('closeModal', this.modal);
        this.handleReset('deptForm');
      },
      /**
       * 清空表单
       */
      handleReset(name) {
        this.$refs[name].resetFields();
      }
    },
    watch: {
      "addVal.show" (newval) {
        if (newval) {
          this.modal = newval;
        }
      }
    }
  }

</script>
<style scoped>


</style>

